<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.carSpecifications" clearable style="width: 160px;" placeholder="输入车辆规格" />
      <el-input v-model="listQuery.carType" clearable style="width: 160px;" placeholder="输入车辆类型" />
      <el-select v-model="listQuery.status" clearable style="width: 160px" placeholder="选择审核状态">
        <el-option v-for="(key, value) in statusMap" :key="key" :label="key" :value="value" />
      </el-select>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="el-icon-search" @click="handleFilter">查找
      </el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
      highlight-current-row>

      <el-table-column align="center" width="100" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>

      <el-table-column align="center" width="180" label="ID" prop="id" />

      <el-table-column align="center" width="180" label="用户ID" prop="userId" />

      <el-table-column align="center" label="车辆" prop="carName" />

      <el-table-column align="center" label="审核状态" prop="status">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.status | statusFilter }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="规格" prop="carSpecifications" />

      <el-table-column align="center" label="类型" prop="carType" />

      <el-table-column align="center" label="载重" prop="carLoad" />

      <el-table-column align="center" label="长" prop="length" />

      <el-table-column align="center" label="宽" prop="width" />

      <el-table-column align="center" label="高" prop="height" />

      <el-table-column align="center" label="体积" prop="volume" />

      <el-table-column align="center" width="130" label="图片">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px; cursor: pointer" :fit="'contain'" :src="scope.row.pictures.split(',')[0]"
            :preview-src-list="scope.row.pictures.split(',')">
          </el-image>
        </template>
      </el-table-column>

      <el-table-column align="center" width="180" label="创建时间">
        <template slot-scope="scope">
          <div>{{ scope.row.createTime | parseTime}}</div>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
      @pagination="getList" />

    <el-dialog :visible.sync="show" title="车辆状态" :modal="false" @close="closeViewer">
      <el-form ref="dataForm" :rules="rules" :model="carVerify" label-position="left" label-width="100px">
        <el-form-item label="状态名称" prop="name">
          <el-radio-group v-model="carVerify.status">
            <el-radio label="1">待审核</el-radio>
            <el-radio label="2">审核通过</el-radio>
            <el-radio label="3">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEdit">修改状态</el-button>
          <el-button @click="closeViewer">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  import {
    listCarSpecificationsAll,
    listCarTypeAll,
    listCarVerify,
    updateCarVerify
  } from '@/api/car'
  import Pagination from '@/components/Pagination'
  import {
    parseTime
  } from '@/utils'
  const statusMap = {
    1: '待审核',
    2: '已审核',
    3: '审核未通过'
  }

  export default {
    name: 'verifyList',
    components: {
      Pagination
    },
    data() {
      return {
        list: undefined,
        total: 0,
        listLoading: true,
        listQuery: {
          pageNum: 1,
          pageSize: 10,
          carSpecifications: '',
          carType: '',
          status: ''
        },
        show: false,
        update: false,
        picturesList: [],
        statusMap,
        carVerify: {
          id: '',
          status: ''
        },
        rules: {
          status: [{
            required: true,
            message: '状态不能为空',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.getList()
    },
    filters: {
      parseTime,
      statusFilter(status) {
        return statusMap[status]
      }
    },
    methods: {
      getList() {
        this.listLoading = true
        listCarVerify(this.listQuery).then(res => {
          this.list = res.data.selectCarOwnerVerifyCondition
          this.total = res.data.allCount
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleUpdate(row) {
        this.update = true
        this.carVerify.id = row.id
        this.carVerify.status = row.status
        this.showViewer()
      },
      handleEdit() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            updateCarVerify(this.carVerify).then(res => {
              let msg = '修改成功'
              console.log(res)
              this.$message.success(msg)
              this.closeViewer()
              this.handleFilter()
            }).catch(() => {
              this.closeViewer()
            })
          }
        })
      },
      showViewer(e) {
        this.show = true
      },
      closeViewer(e) {
        this.show = false
      }
    }
  }
</script>
<style lang="less" scoped>
</style>
